<template>
  <view class="container">
    <view class="top-box">
      <view class="search-box">
        <u--input
          placeholder="前置图标"
          class="search-input"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
        >
        </u--input>
      </view>
      <u-tabs
        class="tabs"
        :list="list1"
        :current="current"
        @click="selectItem"
        :lineColor="`url(${tabsBg}) 100% 100%`"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.06)',
        }"
        :inactiveStyle="{
          color: '#757575',
        }"
      ></u-tabs>
    </view>
    <view class="content">
      <view class="list">
        <theaterItem
          @onChase="onChanse"
          @onItem="onDetail(item)"
          :info="item"
          class="item"
          v-for="(item, index) in list"
          :key="index"
        />
      </view>
    </view>
    <u-popup
      :round="10"
      :show="showCancelChase"
      class="cancel-chase-modal t-center"
    >
      <view class="cancel-content">
        <view class="title deep-dark">确认取消追剧吗？</view>
        <view class="tip gray">取消后可能找不到本剧哦~</view>
        <button @click="cancelChase" class="btn">确认</button>
        <button @click="showCancelChase = false" class="btn active">
          再想想
        </button>
      </view>
    </u-popup>
  </view>
</template>

<script>
const tabsBg = require("../../assets/images/common/tabs-active-bg.png");
import theaterItem from "@/components/theater/card";
export default {
  components: {
    theaterItem,
  },
  data() {
    return {
      num: 0,
      tabsBg,
      list1: [
        {
          name: "关注",
          id: "1",
        },
        {
          name: "推荐",
        },
        {
          name: "电影",
        },
        {
          name: "科技",
        },
        {
          name: "音乐",
        },
        {
          name: "美食",
        },
        {
          name: "文化",
        },
        {
          name: "财经",
        },
        {
          name: "手工",
        },
      ],
      current: 1,
      showCancelChase: false, //取消追剧提示
      list: [
        {
          id: 1,
          isChase: 1, //0-否 1-是
          chaseTotal: 1.23,
          name: "对对对对对对VS的八十多八点才啊对对女生玩的发的非常奥迪车发生的",
          cover: "",
          shotIntroduce:
            "对对对对对对VS的八十多八点才啊对对女生玩的发的非常奥迪车发生的对对对对对对VS的八十多八点才啊对对女生玩的发的非常奥迪车发生的",
        },
        {
          id: 2,
          isChase: 0, //0-否 1-是
          chaseTotal: 2.23,
          name: "2对对对对对对VS的八十多八点才啊对对女生玩的发的非常奥迪车发生的",
          cover: "",
          shotIntroduce:
            "2对对对对对对VS的八十多八点才啊对对女生玩的发的非常奥迪车发生的对对对对对对VS的八十多八点才啊对对女生玩的发的非常奥迪车发生的",
        },
      ],
      chaseItem: null,
    };
  },
  onLoad() {},
  methods: {
    selectItem(item) {
      console.log(item);
      this.current = item.index;
    },
    onDetail(item) {
      console.log(item);
      uni.navigateTo({
        url: "/pages/theater/detail",
      });
    },
    onChanse(item) {
      console.log(item);
      this.chaseItem = item;
      const _item = this.list.filter((i) => {
        return i.id == item.id;
      })[0];
      if (!_item.isChase) {
        _item.isChase = !_item.isChase;
        uni.showToast({
          title: "追剧成功！",
          icon: "none",
          duration: 2000,
        });
      } else {
        this.showCancelChase = true;
      }
    },
    cancelChase() {
      const item = this.list.filter((i) => {
        return i.id == this.chaseItem.id;
      })[0];
      item.isChase = !item.isChase;
      this.showCancelChase = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  .top-box {
    background: url("@/assets/images/common/head-bg.png") no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    padding: 113rpx 30rpx 30rpx;
    width: calc(100% - 60rpx);
    z-index: 4;
    .search-input {
      background-color: #fff;
      height: 76rpx;
      width: 100%;
      border-radius: 58rpx;
      box-sizing: border-box;
    }
    .tabs {
      margin-top: 16rpx;
    }
  }
  .content {
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 113rpx 30rpx 30rpx 30rpx;
    z-index: 3;
    position: relative;
  }
  .list {
    width: 100%;
    margin-top: 200rpx;
    .item {
      margin-bottom: 23rpx;
    }
  }
}
.cancel-chase-modal {
  .cancel-content {
    background: linear-gradient(
      180deg,
      rgba(88, 222, 227, 0.2) 0%,
      rgba(88, 222, 227, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 162rpx;
    padding: 60rpx;
    line-height: 1;
    .title {
      font-size: 35rpx;
    }
    .tip {
      margin-top: 46rpx;
      margin-bottom: 60rpx;
    }
    .btn {
      display: inline-block;
      width: calc(50% - 20rpx);
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 46rpx;
      &.active {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
